<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<style>
			.a1 {
				display: block;
				width: 100px;
				height: 100px;
				background-color: pink;
			}

			.a2 {
				font-size: 2em;
			}

		</style>
	</head>
	<body>
		<a id="a1" href="#" data-a="data-a">链接</a>
		用户名：<input type="text" name="username" class="input">
		<input type="button" name=""  value="按钮">
		<br><br>
		<!-- js校验案例 -->
		<input type="text" name="">
		<button onclick="myFunction()">按钮</button> 

		<script>
			let a = document.getElementById("a1");
			console.log(a);

			// 修改a标签中的href属性
			a.href = "http://www.baidu.com";

			// 修改行内样式 用的标签中的style属性
			// console.log(a.style.display); 基础是变量 对象 数组 中的值
			// a.style.display = "block";
			// a.style.width = "100px";
			// a.style.height = "100px";
			// a.style.backgroundColor = "pink";

			// 当有多个属性的时候可以将类样式添加到标签上
			a.className = "a1";


			// 当有多个类的时候
			
			// let classList = a.classList;
			// console.log(classList);
			// // 添加类样式
			// classList.add("a2");
			// // 移除类样式
			// classList.remove("a2");
			// // 转换类样式（反转）当前如果有该类就删除 如果没有该类就添加
			// classList.toggle("a2");

			// 所有html元素中添加的自定义属性 通过dataset对象来进行获取 html5出现的
			console.log(a.dataset.a);


			// 获取表单中的内容并修改
			// let input = document.querySelectorAll('input[name="username"]');
			let input = document.querySelectorAll('input');
			console.log(input[0]);

			console.log(input[0].value);
			input[0].value = "input1";
			input[0].type = "password";


			console.log(input[1]);
			// 在html标签中 当属性名和属性值相同时 属性值可以不写
			input[1].setAttribute("disabled", "disabled");
			input[1].removeAttribute("disabled");
			

			// input[1].disabled = true;
			// input[1].disabled = false;

			// 我们通常使用js来对表单进行校验（减少用户多次请求） 后端是不是也要校验 （post）
			// 校验数字1-10

			/*
				思路分析：
				1.获取元素 4种 
				（1）id
				（2）类名
				（3）标签名
				（4）CSS选择器
				input表单元素
				2.修改值 做逻辑
				判断是否是1-10之间的数字
				(1)应该是数字
				（2）1-10的数字
				是否符合条件 
			*/

			function myFunction() {
				let input = document.querySelectorAll("input");
				console.log(input[2]);
				let inputValue = input[2].value;
				console.log(inputValue, typeof inputValue);
				if(!(!isNaN(inputValue) && inputValue >= 1 && inputValue <= 10)) {
					alert("数字输入的有误，请重新输入！");
				}
			}



		</script>
	</body>
</html>